<template>
  <div id="thermometer" :style="size">
    <div class="value">{{ppvalue}}</div>
    <chart ref="chart1" :options="orgOptions" :style="chartsize" :auto-resize="true"></chart>
    <div class="name">{{ppname}}</div>
  </div>
</template>

<script>
  export default {
    name: 'GROUND',
    data () {
      return {
        orgOptions: {},
        value: 40,
        ppvalue: '',
        ppname: '',
        data: [70],
        kd: [],
        size: {
          width: '100%',
          height: '100%'
        },
        chartsize: {
          width: '100%',
          height: '80%'
        },
        mercuryColor: '#7ECEF4',
        borderColor: '#ff0'
      }
    },
    computed: {},
    created () {
      this.sekd()
    },
    methods: {
      sekd () {
        for (var i = 0, len = 130; i <= len; i++) {
          if (i > 100 || i < 30) {
            this.kd.push('0')
          } else {
            if (i % 5 === 0) {
              this.kd.push('5')
            } else {
              this.kd.push('3')
            }
          }
        }
      },
      getData () {
        return [this.value + 30]
      }
    },
    props: {
      name: String,
      pnum: String,
      colorstr: String
    },
    watch: {
      pnum () {
        this.value = parseInt(this.pnum)
        this.ppvalue = this.pnum
        this.data = this.getData()
        this.orgOptions.series[0].data = [this.value + 30]
      },
      colorstr () {
        this.borderColor = this.colorstr
        this.orgOptions.series[5].itemStyle.normal.color = this.borderColor
        this.orgOptions.series[2].itemStyle.normal.color = this.borderColor
      }
    },
    mounted () {
      this.ppname = this.name
      this.value = parseInt(this.pnum)
      this.ppvalue = this.pnum
      this.borderColor = this.colorstr
      this.orgOptions = {
        title: {
          text: '温度计',
          show: false
        },
        grid: {
          top: '-20%',
          left: '0%',
          right: '40%',
          bottom: '20%',
          containLabel: true
        },
        yAxis: [{
          show: false,
          min: 0,
          max: 130
        }, {
          show: false,
          data: [],
          min: 0,
          max: 130
        }],
        xAxis: [{
          show: false,
          data: []
        }, {
          show: false,
          data: []
        }, {
          show: false,
          data: []
        }, {
          show: false,
          min: -110,
          max: 100

        }],
        series: [
          {
            name: '条',
            type: 'bar',
            // 对应上面XAxis的第一个对象配置
            xAxisIndex: 0,
            data: [this.value + 30],
            barWidth: 5,
            itemStyle: {
              normal: {
                color: this.mercuryColor,
                barBorderRadius: 0
              }
            },
            label: {
              normal: {
                show: false,
                position: 'top',
                formatter: function (param) {
                  // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
                  return param.value - 30 + '°C'
                },
                textStyle: {
                  color: '#ccc',
                  fontSize: '7'
                }
              }
            },
            z: 2
          },
          {
            name: '白框',
            type: 'bar',
            xAxisIndex: 1,
            barGap: '-100%',
            data: [129],
            barWidth: 7,
            itemStyle: {
              normal: {
                color: '#ffffff',
                barBorderRadius: 50
              }
            },
            z: 1
          },
          {
            name: '外框',
            type: 'bar',
            xAxisIndex: 2,
            barGap: '-100%',
            data: [130],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: this.borderColor,
                barBorderRadius: 50
              }
            },
            z: 0
          },
          {
            name: '圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 0,
            symbolSize: 11,
            itemStyle: {
              normal: {
                color: this.mercuryColor,
                opacity: 1
              }
            },
            z: 2
          },
          {
            name: '白圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 1,
            symbolSize: 19,
            itemStyle: {
              normal: {
                color: '#ffffff',
                opacity: 1
              }
            },
            z: 1
          },
          {
            name: '外圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 2,
            symbolSize: 28,
            itemStyle: {
              normal: {
                color: this.borderColor,
                opacity: 1
              }
            },
            z: 0
          },
          {
            name: '刻度',
            type: 'bar',
            yAxisIndex: 1,
            xAxisIndex: 3,
            label: {
              normal: {
                show: false,
                position: 'right',
                distance: 5,
                color: '#525252',
                fontSize: 10,
                formatter: function (params) {
                  // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
                  if (params.dataIndex > 100 || params.dataIndex < 30) {
                    return ''
                  } else {
                    if (params.dataIndex % 5 === 0) {
                      return params.dataIndex - 30
                    } else {
                      return ''
                    }
                  }
                }
              }
            },
            barGap: '-100%',
            data: this.kd,
            barWidth: 1,
            itemStyle: {
              normal: {
                color: this.borderColor,
                barBorderRadius: 10
              }
            },
            z: 0
        }]
      }
    }
  }
</script>
<style>
  #thermometer {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #thermometer .value, #thermometer .name {
    width: auto;
    height: 5%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }
</style>
